<!--
 * @Author: wuyuanhong wuyuanhong@szhbzc.com
 * @Date: 2024-09-11 15:53:50
 * @LastEditors: wuyuanhong wuyuanhong@szhbzc.com
 * @LastEditTime: 2024-09-14 10:49:28
 * @FilePath: \xiamenAgency\src\view\menu\basicInformation\basicData\cuisineManagement\cuisineManagement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <cus-search class="mb_20" :showTitle="false">
      <cus-search-item>
        <Form ref="formValidate" :model="form" :label-width="80">
          <FormItem class="mr_48 mb_20" label="菜肴编码:" prop="dishCode">
            <Input v-model="form.dishCode" maxlength="20" clearable placeholder="请输入菜肴编码" style="width: 200px">
            </Input>
          </FormItem>

          <FormItem class="mr_48 mb_20" label="菜肴名称:" prop="dishName">
            <Input v-model="form.dishName" maxlength="20" clearable placeholder="请输入菜肴名称" style="width: 200px">
            </Input>
          </FormItem>

          <FormItem class="mr_48 mb_20" label="菜肴类型:" prop="dishCategory">
            <Select v-model="form.dishCategory" style="width: 200px" placeholder="请选择" clearable>
              <Option :value="item.dishCategory" v-for="(item, index) in materialTypeList" :key="index">{{
                item.dishCategory }}</Option>
            </Select>
          </FormItem>
          <!-- <FormItem class="mr_48 mb_20" label="常用状态:" prop="dishStatus">
            <Select
              v-model="form.dishStatus"
              style="width: 200px"
              placeholder="请选择"
              clearable
            >
              <Option value="0">否</Option>
              <Option value="1">是</Option>
            </Select>
          </FormItem> -->
          <FormItem class="mr_48 mb_20" label="新增菜肴" prop="isSystemDish">
            <Select v-model="form.isSystemDish" style="width: 200px" placeholder="请选择" clearable>
              <Option value="0">否</Option>
              <Option value="1">是</Option>
            </Select>
          </FormItem>
          <FormItem class="mr_48 mb_20" label="伙食单位:" prop="unitCode">
            <Select v-model="form.personalizedUnitCode" placeholder="全部" clearable style="width: 200px">
              <Option :value="item.unitCode" v-for="(item, index) in subCanteenList" :key="index">{{
                item.unitName }}</Option>
            </Select>
          </FormItem>
          <div class="button-wrap">
            <cusButton class="mr_20 mb_20" type="primary" @onClick="
              pages.page = 1;
            onInit();
            ">查询</cusButton>
            <cusButton class="mr_20 mb_20" type="default" @onClick="reset()">重置</cusButton>
          </div>
        </Form>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">
      <div class="btnBox">
        <Dropdown transfer trigger="click" @on-click="openConfigPage">
          <cusButton class="mr_20">
            系统参数配置
            <Icon type="ios-arrow-down"></Icon>
          </cusButton>
          <DropdownMenu slot="list">
            <DropdownItem :name="0">菜肴食材占比配置</DropdownItem>
            <DropdownItem :name="1">动态配置</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <cusButton class="mr_20" @onClick="onAudit()" v-if="$store.state.kitchenMode != 'only_kitchen'" >个性化菜肴审核</cusButton>
        <cusButton class="mr_20" type="default" v-permission="20" @onClick="onAdd()">添加</cusButton>
        <cusButton type="primary" v-permission="50" @onClick="onImport()">导入菜肴</cusButton>

      </div>
      <div class="tableBox">
        <cusTable border :loading="loading" :columns="columns" :data="data" :bottomClass="['cus-page']">
          <template slot-scope="{ row, index }" slot="dishUrl">
            <div style="display: flex; justify-content: center">
              <div class="table-cell-img">
                <img :src="row.dishUrl" alt="" class="" border="0" onload="autosize(this,50,50);"
                  @click="$cu.previewImage(row.dishUrl)" />
              </div>
            </div>
          </template>
          <template slot-scope="{ row }" slot="isSystemDish">
            <div>{{ row.isSystemDish == 0 ? "否" : "是" }}</div>
          </template>

          <template slot-scope="{ row }" slot="operation">
            <div class="flex">
              <Button class="mr_20" type="primary" size="small" :style="{ color: '#ffffff', padding: '0 8px' }"
                @click="onDetail(row)">营养标签</Button>
              <Button class="mr_20" type="primary" size="small" v-permission="30"
                :style="{ color: '#ffffff', padding: '0 8px' }" @click="onEdit(row)">编辑</Button>
              <Poptip confirm transfer placement="left" :title="`是否确认删除菜肴 ${row.dishName} ？`" @on-ok="onDelete(row)">
                <Button class="mr_20" type="error" size="small" v-permission="40"
                  :style="{ color: '#ffffff', padding: '0 8px' }">删除</Button>
              </Poptip>
            </div>
          </template>
        </cusTable>
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page :data="pages" class="mt_20" @pageChange="dishSearchListApi()"></cus-page>
        </div>
      </div>
    </div>
    <!-- 导入 -->
    <cus-uploadModal ref="cusUploadNutritionTagModal" :temp-src="exportNutritionTagTemp" :uploadFnc="uploadNutritionTag"
      titleName="导入菜肴" :width="700"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @onBeforeUpload="onBeforeUpload" @onError="onError" @onOk="exprotInit">
      <template #right>
        <Card class="draw-section-item">
          <!-- <div @click="intellectOk">1111</div> -->
          <cus-upload :uploadFnc="intellectImport" :autoUpload="true"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            @onOk="intellectOk" @onError="intellectError">
            <div class="draw-section-item-logo flex">
              <svg t="1628043694436" class="icon" viewBox="0 0 1157 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="24667" width="118" height="118">
                <path
                  d="M0.09216 582.528c0-124.37504 82.23744-233.71264 192.1536-266.112C253.07648 156.0832 403.70688 40.96 579.93216 40.96c177.64352 0 324.18304 115.07712 384.96768 275.456 113.4336 33.152 192.19968 141.06624 192.19968 266.112 0 153.96864-119.57248 279.14752-270.91968 279.14752-28.34432 0-53.92896-26.60864-53.92896-56.06912 0-33.8176 25.58464-56.1152 53.92896-56.1152 91.22816 0 163.80928-74.09664 163.80928-166.87616 0-49.61792-21.44768-95.67744-56.64768-125.1328l-9.66144-9.43616a48.96256 48.96256 0 0 0-12.46208-10.05568c-2.75968-3.60448-9.03168-3.60448-12.46208-6.49728h-3.42528c-2.75968-3.5584-6.23104-3.5584-9.0368-6.4512h-3.47136c-2.75968 0-6.23104-3.5584-9.65632-3.5584-2.75968 0-6.23104 0-6.23104-2.8928h-9.0368c-3.47136 0-6.23104 0-9.7024-3.60448h-25.4976c-2.75968-10.81344-6.23104-18.688-6.23104-29.50144-2.75968 0-2.75968-3.5584-2.75968-6.4512-3.42528-6.49728-3.42528-12.90752-6.23104-19.44576 0-3.5584-3.42528-3.5584-3.42528-7.16288-2.75968-6.49728-6.23104-12.90752-9.65632-19.4048v-6.49728c-2.80576-6.4512-9.07776-12.90752-12.46208-19.44576-53.18144-92.11392-151.38816-154.63936-261.97504-154.63936-113.34144 0-211.46624 62.5664-264.68864 154.63936l-9.0368 19.44576c0 2.18112-1.42336 2.18112-2.08896 4.31616l-1.3824 2.18112-9.7024 19.4048v7.16288l-8.94464 19.44576v6.4512c-3.47136 10.77248-6.94272 18.688-6.94272 29.46048h-28.30336c-2.75968 3.60448-6.23104 3.60448-8.94464 3.60448h-6.23104c-2.75968 2.18112-4.14208 2.8928-4.89472 2.8928a1.24928 1.24928 0 0 1-2.048 0c-2.75968 0-6.23104 3.5584-9.03168 3.5584h-6.23104c-3.42528 2.93376-6.23104 2.93376-9.65632 6.49728h-3.42528c-2.75968 2.8928-6.23104 2.8928-9.07776 6.49728h-3.42528c-2.75968 3.5584-6.23104 6.4512-9.7024 10.05568-6.23104 2.84672-8.94464 6.49728-12.416 9.39008-35.24608 29.50656-53.2224 75.56096-53.2224 125.17888 0 92.77952 72.58112 166.87616 160.37888 166.87616 32.4864 0 56.69376 22.29248 56.69376 56.06912 0 29.50656-24.20736 56.07424-56.69376 56.07424-147.82976 0.04096-270.8736-125.13792-270.8736-279.01952v-0.09216z"
                  p-id="24668"></path>
                <path
                  d="M362.94656 566.72768c0-16.54784 6.23104-28.78976 12.46208-39.56224l163.7632-186.90048c10.41408-10.81344 24.91904-16.55296 40.8064-16.55296 15.92832 0 28.34432 5.7856 41.47712 16.512l160.37888 186.98752c21.5296 22.19008 21.00224 57.63072-1.18784 79.16544a56.00256 56.00256 0 0 1-39.57248 15.80032c-15.92832 0-27.67872-8.6784-38.04672-19.45088l-69.10976-78.40768v281.9584c0 33.8176-24.21248 55.3984-53.93408 55.3984-31.104 0-53.2224-21.5808-53.2224-55.3984v-281.91232L457.69728 602.7264c-10.368 10.81344-25.54368 19.45088-41.43104 19.45088-28.3904 0-53.31456-25.90208-53.31456-55.40352v-0.04608z"
                  p-id="24669"></path>
              </svg>
            </div>
            <div class="draw-section-item-title">智能导入excel</div>
            <div class="draw-section-item-label">智能导入excel文件 <br /> 可拖拽上传</div>
          </cus-upload>
        </Card>
      </template>

    </cus-uploadModal>
    <!-- 菜肴参数配比 -->
    <foodIngredients ref="foodIngredientsRef"></foodIngredients>
    <!-- 动态配置 -->
    <dynamicConfig ref="dynamicConfigRef"></dynamicConfig>
    <!-- 菜肴信息匹配 -->
    <dishReview ref="dishReviewRef"></dishReview>
    <!-- 添加、编辑菜肴 -->
    <addDishesModal ref="addDishesModal"></addDishesModal>
    <!-- 营养标签 -->
    <dishesTags ref="dishesTags"></dishesTags>
    <!-- 个性化菜肴审核 -->
    <PersonalizedAuditModal ref="personalizedAuditModal"></PersonalizedAuditModal>
    <!-- 是否常用提示 -->
    <cus-modal ref="dishStatusModal" width="500" title="提示：">
      <div>{{ dishStatusErrorList }}</div>
      <div slot="footer">
        <slot name="footer">
          <div class="modal-footer"></div>
        </slot>
      </div>
      <Spin size="large" fix v-if="loading"></Spin>
    </cus-modal>
  </div>
</template>

<script>
import {
  getDishListType,
  dishSearchList,
  downloadDishInportExcelTemplate,
  examineInportDishExcel,
  inportLocalDishExcel,
  localDishDelete,
  postApiBasicUdateDishStatus,
  dishReviewImport,
} from "@/api/organ/dishesModule";
import dishReview from "./components/dishReview";
import dynamicConfig from "./components/dynamicConfig";
import foodIngredients from "./components/foodIngredients";
import addDishesModal from "./components/addDishesModal";
import { getSubCanteenList } from '@/api/organ/organization'
import dishesTags from "./components/dishesTags";
import PersonalizedAuditModal from "./components/personalizedAuditModal";
export default {
  components: { foodIngredients, dynamicConfig, dishReview, addDishesModal, dishesTags, PersonalizedAuditModal },
  data() {
    return {
      ruleValidate: {},
      form: {
        dishName: "", // 菜肴名称
        dishCategory: "", // 菜肴分类
        dishStatus: "", // 常用状态
        dishCode: "", // 菜肴编码
        isSystemDish: "",
        personalizedUnitCode: '', //所属单位
      },
      file: null,
      dishStatusErrorList: [], // 是否常用Switch不可操作错误提示信息
      materialTypeList: [], // 菜肴分类列表
      exportNutritionTagTemp: downloadDishInportExcelTemplate, // 下载模板地址
      subCanteenList: [{ unitCode: 'all', unitName: '' }], //下级单位列表
      uploadNutritionTag: examineInportDishExcel, //
      inportLocalDishExcel: inportLocalDishExcel,
      intellectImport: dishReviewImport,
      loading: false,
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "菜肴编码",
          key: "dishCode",
          align: "center",
        },
        {
          title: "菜肴名称",
          key: "dishName",
          align: "center",
        },
        {
          title: "菜肴类型",
          key: "dishType",
          align: "center",
        },
        {
          title: "所属食堂",
          key: "personalizedUnitName",
          align: "center",
        },
        {
          title: "图片",
          slot: "dishUrl",
          align: "center",
        },
        // {
        //   title: "是否为常用",
        //   slot: "dishStatus",
        //   align: "center",
        // },
        {
          title: "是否为新增菜肴",
          slot: "isSystemDish",
          align: "center",
        },
        {
          title: "操作",
          width: 245,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  mounted() {
    this.getDishListTypeApi();
    this.dishSearchListApi();
    this.getSubCanteenListApi()
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 431; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    // 打开配置项
    openConfigPage(val) {
      if (val) {
        this.$refs["dynamicConfigRef"].onShow();
      } else {
        this.$refs["foodIngredientsRef"].onShow();
      }
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 431; // 表格自适应高度
        console.log(this.tableHeight);
      }, 100);
    },
    // 初始化
    onInit() {
      this.getDishListTypeApi();
      this.dishSearchListApi();
    },
    // 智能导入成功
    intellectOk(res) {
      console.log('导入成功', res);
      if (res.code == 1) {
        // this.$Message.success("导入成功!");
        this.$refs["cusUploadNutritionTagModal"].onCancel();
        this.$refs["dishReviewRef"].onShow();
      }
      // this.$refs["cusUploadNutritionTagModal"].onCancel();
      //   this.$refs["dishReviewRef"].onShow();
    },
    // 智能导入失败
    intellectError(val) {
      console.log('导入失败', val);
      this.$Message.error("导入失败!");
    },
    // 导入成功
    exprotInit() {
      this.sendAgain(0);
      setTimeout(() => {
        this.dishSearchListApi();
      }, 1000);
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.pages.page = 1;
      this.onInit();
    },
    onBeforeUpload(file) {
      this.file = file;
    },
    // 导出
    onExport() { },
    // 添加
    onAdd() {
      this.$refs["addDishesModal"].show();
    },
    // 个性菜肴审核
    onAudit() {
      this.$refs['personalizedAuditModal'].show()
    },
    // 删除
    onDelete(row) {
      localDishDelete({
        dishCode: row.dishCode,
      }).then((res) => {
        if (res.code === 1) {
          this.$Message.success("菜肴删除成功.");
          if (this.data.length == 1 && this.pages.page != 1) this.pages.page--
          this.onInit();
        }
      });
    },
    // 导入错误
    onError(data) {
      console.log(data);
      if (data.code == 2888) {
        let content = "";
        if (data.data.result == -1) {
          data.data.list.map((it) => {
            content += `<p style="margin-top:5px">${it}</p>`;
          });
          this.$Modal.warning({
            title: data.msg,
            content: content,
            width: "600",
            okText: "关闭",
          });
        }
        if (data.data.result == -2) {
          data.data.dishList.map((it) => {
            content += `<p style="margin-top:5px">${it}</p>`;
          });
          this.$Modal.confirm({
            title: data.msg,
            content: content,
            width: "600",
            okText: "确认覆盖",
            cancelText: "跳过",
            onOk: () => {
              this.sendAgain(1);
            },
            onCancel: () => {
              this.sendAgain(0);
            },
          });
        }
      }
    },
    // 导入
    onImport() {
      this.$refs["cusUploadNutritionTagModal"].show();
    },
    // 营养标签
    onDetail(row) {
      this.$refs["dishesTags"].form.dishCode = row.dishCode;
      this.$refs["dishesTags"].form.dishName = row.dishName;
      this.$refs["dishesTags"].show();
    },
    // 编辑
    onEdit(row) {
      this.$refs["addDishesModal"].form.dishCode = row.dishCode;
      this.$refs["addDishesModal"].show();
    },
    // 是否常用状态
    ifSwitchChange(row) {
      this.postApiBasicUdateDishStatusApi(row.dishCode);
    },
    // 查询列表
    dishSearchListApi() {
      this.loading = true;
      return new Promise((resolve) => {
        let obj = this.form;
        obj.current = this.pages.page;
        obj.size = this.pages.pageSize;
        obj.personalizedStatusArr = '1'
        dishSearchList(obj).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            console.log(res);
            res.data.list.forEach((element) => {
              element.dishStatus = element.dishStatus === 1 ? true : false;
            });
            this.data = res.data.list;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 获取所有的伙食单位-----------------------接口
    getSubCanteenListApi() {
      this.loading = true
      this.subCanteenList = [{ unitCode: '', unitName: '全部' }]
      return new Promise((resolve) => {
        getSubCanteenList({
          currentPage: 1,
          pageSize: 1000
        }).then((res) => {
          this.loading = false
          if (res.code === 1) {
            this.subCanteenList = this.subCanteenList.concat(res.data.list)
            resolve()
          }
        })
      })
    },
    // 获取菜肴分类
    getDishListTypeApi() {
      return new Promise((resolve) => {
        getDishListType({}).then((res) => {
          if (res.code === 1) {
            this.materialTypeList = res.data;
            resolve();
          }
        });
      });
    },
    // 覆盖或者跳过
    sendAgain(type) {
      this.$cu.showLoading();
      let params = new FormData();
      params.append("type", type);
      params.append("file", this.file);
      this.inportLocalDishExcel(params)
        .then((res) => {
          if (res.code === 1) {
            this.$cu.hideLoading();
            this.$Message.success("上传成功");
          }
        })
        .catch(() => this.$cu.hideLoading(1.5));
    },
    //本地菜肴模块-是否常用状态-------接口
    postApiBasicUdateDishStatusApi(v) {
      return new Promise((resolve) => {
        let params = {
          dishCode: v,
        };
        postApiBasicUdateDishStatus(params).then((res) => {
          if (res.code == 1) {
            this.dishSearchListApi();
            resolve(res);
          } else {
            this.$refs["dishStatusModal"].show = true;
            this.dishStatusErrorList = res.data;
            setTimeout(() => {
              this.dishSearchListApi();
            }, 30);
          }
        });
      });
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
};
</script>
<style scoped>
::v-deep.ivu-input-icon {
  height: 32px !important;
  line-height: 32px !important;
}
</style>
<style lang="less" scoped>
.content {
  height: 100%;

  // padding: 20px;
  &-bottom {
    background: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
    padding: 20px;
  }
}

.formBox {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
  padding: 20px 20px 1px;
  display: flex;
  flex-wrap: wrap;

  &-item {
    margin-right: 48px;
  }
}

.mr_20 {
  margin-right: 20px;
}

::v-deep .ivu-table-wrapper-with-border {
  border-radius: 6px;
}

.draw {
  &-section {
    display: flex;
    align-items: center;
    justify-content: space-around;

    &-item {
      background: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 220px;
      cursor: pointer;
      width: 170px;


      &-title {
        text-align: center;
        margin-top: 10px;
        color: rgba(51, 51, 51, 1);
      }

      &-label {
        text-align: center;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
}
</style>
